<template>
	<div class="centreLeft1">
		<div class="bg-color-black">
			<div class="d-flex pt-2 pl-2">
				<span>
					<i class="iconfont icon-tongji4" />
				</span>
				<div class="d-flex">
					<span class="fs-xl text mx-2">田地切换面板</span>
					<dv-decoration-3 class="dv-dec-3" />
				</div>
			</div>
			<div
				style="
					height: 100%;
					width: 100%;
					display: flex;
					align-items: center;
					flex-direction: column;
					margin-top: 20px;
				"
			>
				<!-- 田地v-for块 -->
				<div
					v-for="(f, index) in fieldData"
					:class="{ selected_field: currentIndex == f.id ? true : false }"
					:style="{
						backgroundImage: `linear-gradient(to top left,rgba(255, 255, 255, 0), #0e1325),url(${f.url})`,
					}"
					@click="toggleField(index)"
					class="field-card"
				>
					<div class="field-text">
						{{ f.name }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue'
	import Chart from './chart/index'
	import { useStore } from 'vuex'

	import { defineEmits } from 'vue'

	const currentIndex = ref(0)

	const store = useStore()

	const fieldData = reactive([
		{ id: 0, name: '试验田1', url: require('@/assets/imgs/1.jpg') },
		{ id: 1, name: '试验田2', url: require('@/assets/imgs/2.jpg') },
		{ id: 2, name: '试验田3', url: require('@/assets/imgs/3.jpg') },
		{ id: 3, name: '试验田4', url: require('@/assets/imgs/4.jpg') },
		{ id: 4, name: '试验田5', url: require('@/assets/imgs/5.jpg') },
	])

	const emit = defineEmits(['refresh'])

	const toggleField = (index) => {
		currentIndex.value = index
		store.state.index = index
		emit('refresh')
	}
</script>

<style lang="scss" scoped>
	@import url('https://fonts.font.im/css?family=Hanalei+Fill');
	$box-height: 900px;
	.centreLeft1 {
		padding: 16px;
		height: $box-height;
		border-radius: 10px;
		.bg-color-black {
			height: $box-height - 30px;
			border-radius: 10px;
		}

		.field-card {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8px;
			border: transparent 0px solid;
			width: 95%;
			height: 17%;
			margin-bottom: 15px;
			background: no-repeat;
			background-size: cover;
			position: relative;
			transform: scale(1);
			transition: border 0.65s ease;
			border: transparent 0px solid;

			&:hover {
				cursor: pointer;
				transform: scale(1.05);
				transition: transform 0.4s ease;
				border: rgb(0, 200, 255) 4px solid;
			}

			.field-text {
				padding: 5px 8px;
				font-family: 'Hanalei Fill', cursive;
				position: absolute;
				visibility: hidden;
				border-radius: 3px;
				background-color: transparent;
				// border: transparent 4px solid;
			}

			&:hover .field-text {
				background-color: #0e1325;
				color: rgb(209, 209, 209);
				// border: #233768 4px solid;
				transform: translate(-90px, 40px);
				font-size: 24px;
				visibility: visible;
				transition: all 0.5s;
			}
		}
		.selected_field {
			transform: scale(1.05);
			border: rgb(0, 200, 255) 4px solid;
			background-color: #0e1325;

			.field-text {
				color: rgb(209, 209, 209);
				background-color: #0e1325;
				// border: #233768 4px solid;
				transform: translate(-90px, 40px);
				font-size: 24px;
				visibility: visible;
				transition: all 0.5s;
			}
		}

		.text {
			color: #c3cbde;
			font-size: 19px;
			opacity: 0.75;
			font-family: 'Hanalei Fill', cursive;
		}
		.dv-dec-3 {
			position: relative;
			width: 100px;
			height: 20px;
			top: -3px;
		}
	}
</style>
